import { Slider } from 'antd-mobile'
import React from 'react'
import styles from './index.module.less'
import type { SliderProps } from 'antd-mobile/es/components/slider'

export default function CustomSlider(props: SliderProps) {
    return (
        <div>
            <Slider
                {...props}
                icon={
                    props.value !== 0 ? (
                        <div className={styles.popup}>
                            <span className={styles.select_val}>
                                <span className={styles.value_text}>{props.value}</span>
                            </span>
                        </div>
                    ) : null
                }
                className={styles.mySlider}
            />
            <div className={styles.marks}>
                <span>&nbsp;0</span>
                <span>100</span>
            </div>
            {/* <Slider {...props} icon={<span>{props.value}</span>} className={styles.span_value} /> */}
            {/* <div className={styles.popup}>
                <sapn style={{ width: `${props.value || 0}%` }}></sapn>
                <span className={ styles.select_val}>{props.value}</span>
                <span style={{ flex: 1 }}/>
            </div> */}
        </div>
    )
}
